<template>
  <div>
    <h1 class="red">组件通信</h1>
    <button @click="addFood">增加新菜</button>
    <button @click="changeCount">打折</button>
    <hr />
    <Food
      v-for="(food, index) in foods"
      :key="index"
      :data="food"
      :discount="discount"
      @change-discount="handlerChange"
    ></Food>
  </div>
</template>

<script>
/**
 * 父子通信：
 * 目的：共享数据
 * 原则：单向数据流->父传递给子，只能在父组件中修改(简单数据类型不能修改，复杂数据类型可以局部修改，因为没有改变引用地址)
 * 1.父传子：将父组件的数据传给子组件使用->传递数据->渲染页面
 * (1)在子组件身上动态绑定一个属性名(变量)->传递数据
 * (2)在子组件内部通过props接收，接收的属性名和动态绑定的属性名一致
 * 2.子传父：把子组件的数据传递给父组件->执行函数
 * (1)在子组件身上写一个自定义事件和回调函数
 * (2)在子组件内部触发自定义事件: this.$emit('事件名'[,参数...])
 */
import Food from "./components/组件通信子组件.vue";
export default {
  components: {
    Food,
  },
  data() {
    return {
      // food: { id: 1, name: "过油肉", price: 9.9 },
      foods: [
        { id: 1, name: "过油肉", price: 9.9 },
        { id: 1, name: "锅包肉", price: 19.9 },
        { id: 1, name: "回锅肉", price: 29.9 },
      ],
      discount: 5,
    };
  },
  methods: {
    // 新增菜品
    addFood() {
      this.foods.unshift({
        id: Date.now(),
        name: Math.floor(Math.random() * 100) + "菜",
        price: Math.floor(Math.random() * 20),
      });
    },
    // 打折
    changeCount() {
      this.discount = Math.floor(Math.random() * 10 + 1);
    },

    handlerChange(num1, num2) {
      // console.log('触发');
      this.discount = num1 + num2;
    },
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>